<template>
  <div class="app">
    <header class="app-header">
      <div class="menu-control">
        <MenuUnfoldOutlined v-if="!isMenuOpen && !isHomePage" @click="appStore.setIsMenuOpen(true)" />
        <MenuFoldOutlined v-if="isMenuOpen && !isHomePage" @click="appStore.setIsMenuOpen(false)" />
      </div>
      <router-link :to="isHomePage ? '/components': '/home'">
        <MButton type="text">
          {{isHomePage ? '组件列表': '返回首页'}}
        </MButton>
      </router-link>
<!--      <router-link to="/api">api</router-link>-->

    </header>
    <div class="app-main">
      <router-view />
    </div>
  </div>
</template>

<script lang="ts">
import {computed, defineComponent, onMounted} from "vue";
import {useAppStore} from "/@/documentation/store/app";
import {MenuUnfoldOutlined , MenuFoldOutlined} from '@ant-design/icons-vue'
import {useRoute} from "vue-router";
export default defineComponent({
  name: "MApp",
  components: {
    MenuUnfoldOutlined,
    MenuFoldOutlined
  },
  setup(){
    const appStore = useAppStore()
    const route = useRoute()
    const initIsMenuOpen = ()=>{
      if(window.innerWidth<=500){
        appStore.setIsMenuOpen(false)
      }else {
        appStore.setIsMenuOpen(true)
      }
    }

    onMounted(()=>{
      appStore.setIsMobile()
      initIsMenuOpen()
      window.addEventListener('resize',()=>{
        appStore.setIsMobile()
        initIsMenuOpen()
      })
    })
    const isMenuOpen = computed(()=>{
      return appStore.isMenuOpen
    })

    const isHomePage = computed(()=>{
      return route.path === '/home'
    })


    return {
      isMenuOpen,
      appStore,
      isHomePage
    }
  }
});
</script>

<style lang="scss">

html body {
  //padding: 0;
  margin: 0;
  padding-top: 50px;
}
</style>

<style lang="scss" scoped>
.app {
  &-header {
    position: fixed;
    z-index: 101;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 28px;
    height: 50px;
    white-space: nowrap;
    background: #fff;
    box-shadow: 0 8px 24px -2px rgb(0 0 0 / 5%);
    .menu-control {
      flex:1;
    }

  }
  &-main {
    margin-top: 0;
  }
}

</style>
